next
Round
Technologies
Experiences
Contribute
Login
next
Round
Technologies
Experiences
Contribute
Login
Question Loading...
Box model
1. What is the box model in HTML?
Level: Expert | Frequency: High
2. Can you explain the components of the Box Model?
Level: Expert | Frequency: High
3. What’s the difference between margin, border, padding, and content?
Level: Expert | Frequency: High
4. How does padding affect the size of an element?
Level: Expert | Frequency: High
5. How does margin differ from padding?
Level: Expert | Frequency: High
6. What happens when you set negative margins?
Level: Expert | Frequency: High
7. Does padding accept negative values? Why or why not?
Level: Expert | Frequency: High
8. How can you visualize the box model in browser dev tools?
Level: Expert | Frequency: High
9. What is the default box-sizing value for HTML elements?
Level: Expert | Frequency: High
10. What does box-sizing: border-box do?
Level: Expert | Frequency: High
11. Compare box-sizing: content-box and border-box.
Level: Expert | Frequency: High
12. How can you make two boxes align perfectly side by side with consistent spacing?
Level: Expert | Frequency: High
13. How do margin collapsing rules work in CSS?
Level: Expert | Frequency: High
14. Give an example of when margin collapsing might cause layout issues.
Level: Expert | Frequency: High
15. How can you prevent margin collapsing between parent and child elements?
Level: Expert | Frequency: High
16. What is the difference between inline, inline-block, and block elements in terms of the box model?
Level: Expert | Frequency: High
17. Do replaced elements (like <img>, <input>) follow the same box model rules?
Level: Expert | Frequency: High
18. How do width and height interact with padding and border in the box model?
Level: Expert | Frequency: High
19. Why might a layout break when switching from content-box to border-box?
Level: Expert | Frequency: High
20. How would you fix an element that overflows its container due to box model miscalculations?
Level: Expert | Frequency: High
21. How do you use the calc() function to compensate for padding or border widths?
Level: Expert | Frequency: High
22. How does the box model interact with flexbox and grid layouts?
Level: Expert | Frequency: High
23. Does the box model behave differently for absolutely positioned elements?
Level: Expert | Frequency: High
24. How can you ensure consistent box sizing across all elements on a webpage?
Level: Expert | Frequency: High
25. What’s the role of outline in the box model, and how is it different from border?
Level: Expert | Frequency: High
26. How can you use the box model to achieve responsive layouts?
Level: Expert | Frequency: High
27. How do you debug box model-related issues in a complex layout?
Level: Expert | Frequency: High
28. Explain how min-width, max-width, and overflow affect the box model.
Level: Expert | Frequency: High
29. How do borders affect element dimensions?
Level: Expert | Frequency: High
All Topics
Basics
Selectors
Box model
Text formatters
Postioning
Display
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else